<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- mui -->
    <link rel="stylesheet" href="./assets/plugins/plugins/mui/css/mui.min.css">

    <!-- mescroll -->
    <link rel="stylesheet" href="./assets/plugins/plugins/mescroll/mescroll.min.css">

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet/less" href="./assets/css/reset.less" />

    <!-- 公共样式 -->
    <link rel="stylesheet/less" href="./assets/css/common.less" />

    <!-- 页面独立的 -->
    <link rel="stylesheet/less" href="./assets/css/index.less" />
</head>
<body>
    <!-- 搜索 -->
    <div class="search">
        <div class="box">
            <div class="icon">
                <span class="glyphicon glyphicon-search"></span>
            </div>

            <input class="input" id="search" placeholder="请输入名字" />

            <button class="btn " size="mini" type="default" onclick="search1()">搜索</button>
        </div>
    </div>

    <!-- 分类 -->
    <div class="type wow fadeInUp">
        <div class="list">
            
        </div>
    </div>

    <!-- 列表 -->
    <div class="contact wow fadeInUp" id="cardList" data-wow-delay="100ms">
        <div class="list">
            
        </div>
    </div>

    <!-- 底部 -->
    <div class="tabbar">
        <div class="box">
            <a href="index.html" class="item">
                <span class="icon glyphicon glyphicon-home"></span>
                <span class="name">首页</span>
            </a>
            <a href="ContactAdd.html" class="item">
                <span class="icon glyphicon glyphicon-list-alt"></span>
                <span class="name">新建</span>
            </a>
            <a href="UserIndex.html" class="item">
                <span class="icon glyphicon glyphicon-user"></span>
                <span class="name">我的</span>
            </a>
        </div>
    </div>
</body>
</html>
<!-- 解析less的文件 -->
<script src="./assets/js/less.min.js"></script>

<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- mui -->
<script src="./assets/plugins/plugins/mui/js/mui.min.js"></script>

<!-- mescroll -->
<script src="./assets/plugins/plugins/mescroll/mescroll.min.js"></script>

<!-- axios -->
<script src="./assets/plugins/plugins/axios/axios.min.js"></script>

<script src="./assets/plugins/plugins/axios/request.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- cookie -->
<script src="./assets/plugins/plugins/cookie.js"></script>

<!-- login -->
<script src="./assets/js/login.js"></script>

<script>
    //实例化wow.js
    new WOW().init()

        // 获取登录信息
        let business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};

// 实例化插件
var meScroll = new MeScroll('cardList',{
    // 下拉刷新
    down: {
        auto:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
        callback: downCallback // 下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
    },
    // 上拉加载
    up: {
        auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
        isBounce: false, //此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
        callback: UpCallback, //上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
        toTop:{ //配置回到顶部按钮
            duration: 600,
            src : "./assets/images/up.png", //默认滚动到1000px显示,可配置offset修改
            offset : 100
        }
    }
});

// 定义参数
let typeid = 0,
    search = '';

// 下拉刷新
async function downCallback()
{
    meScroll.resetUpScroll();
    $('#cardList .list').empty();
}

// 上拉加载
async function UpCallback(page)
{
    let data = {
        page:page.num,
        limit:page.size,
        businessid:business.id,
        typeid:typeid,
        search
    }

    let result = await POST({
        url:'card/card/index',
        params:data
    });

    if(result && result.code === 0)
    {
        meScroll.endBySize(0,0);
        return;
    }

    let list = result.data.list;
    let count = result.data.count;
    
    meScroll.endBySize(list.length,count);

    fetchList(list);
}

function fetchList(list = [])
{
    if(list.length > 0)
    {
        let tmp = '';

        for(let item of list)
        {
            tmp += `
            <div class="item">
                <div class="content">
                    <h3 class="title">
                        <a>${item.nickname}</a>
                    </h3>

                    <div class="info">
                        <div class="icon">
                            <image src="./assets/images/info.png"></image>
                        </div>
                        <div class="desc">
                            ${item.remark}
                        </div>
                    </div>
                </div>
                
                <div class="call icon">
                    
                </div>

                <div class="operation">
                    <button class="btn btn-primary" onclick="onEdit(${item.id})">编辑</button>
                    <button class="btn btn-danger" onclick="onDel(${item.id})">删除</button>
                </div>
            </div>
            `
        }

        $('#cardList .list').append(tmp);
    }
}

// 通讯录分类
(async () => {
    let result = await POST({
        url:'card/card/type'
    });

    if(result && result.code === 1)
    {
        let tmp = '';

        result.data.unshift({
            id:0,
            name:'全部'
        })

        for(let item of result.data)
        {
            tmp += `<div class="item ${item.id == 0 ? 'active' : ''}" data-typeid="${item.id}">${item.name}</div>`
        }

        $('.type .list').html(tmp);
    }
})();

$('.type .list').on('click','.item',function(){
    typeid = $(this).data('typeid');
    $(this).addClass('active').siblings().removeClass('active');
    downCallback();
});

function search1(){
    search = $('#search').val();
    downCallback();
};
function onEdit(id)
    {
        location.href = 'ContactEdit.html?cardid=' + id;
    }

function onDel(id)
{
    mui.confirm('是否确认删除该联系人？','删除联系人',async function(res){
        if(res.index === 1)
        {
            let data = {
                businessid:business.id,
                cardid:id
            }

            let result = await POST({
                url:'card/card/del',
                params:data
            });

            if(result && result.code === 1)
            {
                mui.toast(result.msg);

                setTimeout(() => {
                    downCallback();
                },2000);

                return;
            }else{
                mui.toast(result.msg);
                return;
            }
        }
    });
}

</script>